<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<title>jQuery.Sugar</title>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
	<script type="text/javascript" src="../jquery.sugar.js"></script>
	<style type="text/css">
		html,body{
			overflow:hidden;
			background:black;
		}
		#obj{
			top:0;
			left:0;
			position:absolute;
			font-size: 30px;
			font-family:Verdana;
			text-align:center;
			padding:50px;
		}
		.a{
			background:green;
			border:3px yellow solid;
			color:yellow;
		}
		.b{
			background:yellow;
			border:3px red solid;
			color:red;
		}
		.c{
			background:red;
			border:3px blue solid;
			color:blue;
		}
		.d{
			background:blue;
			border:3px green solid;
			color:green;
		}
	</style>
</head>
<body>
	<div id="obj">&nbsp;</div>
	<script type="text/javascript">
		$.fn.moveTo = function( x, y, speed, callback ){
			return this.animate({ left:x, top:y }, speed, callback );
		};
		
		 $('#obj').moveTo( 200, 200, 2000 )
			.then()
				.attr('class','b')
				.text('Woohooo!')
				.moveTo( 700, 0, 3000 )
				.then()
					.attr('class','c')
					.moveTo( 5, 0, 2000 )
					.then()
						.text('I\'m back')
						.attr('class','d')
					.meanwhile()
					.text('Ok, stop!')
				.done()
			.meanwhile()
			.attr('class','a')
			.text('I\'m flying!');
	</script>
</body>
</html>
